<!--
 * @Date: 2022-08-04 16:29:35
 * @LastEditors: StavinLi
 * @LastEditTime: 2022-09-21 11:25:18
 * @FilePath: /Workflow/src/components/dialog/roleDialog.vue
-->
<template>
   <el-dialog title="选择角色" :visible.sync="isRole" width="600px" append-to-body class="promoter_person">
    <div class="box">
      <div class="left_box">
        <!-- <el-input
          class="search_personnel"
          placeholder="输入关键字进行过滤"
          v-model="filterText">
        </el-input> -->

        <el-checkbox-group v-model="roleCheckList">
          <p class="checkbox_box" v-for="item in dataList"  :key="item.id">
            <el-checkbox :label="item.id">{{item.name}}</el-checkbox>
          </p>
          
        </el-checkbox-group>
      </div>
      <div class="right_box">
        <div class="ri_top">
          <span>已选({{selectList.length}})</span>
          <span class="close" @click="clear" >清空</span>
        </div>
        <div class="ri_cen">
          <div class="cen_list" v-for="(item,index) in selectList" :key="item.id">
            <span>{{item.name}}</span>
            <span class="el-icon-circle-close close" @click="delselectItem(item,index)"></span>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="isRole = false">取 消</el-button>
      <el-button type="primary" @click="saveDialog">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {mapState} from 'vuex'
// import { getRoleList } from './getRoleList.js'

import { getRoleList } from "@/plugins/api.js";


export default {
  
  props: ['visible', 'data','type',"transmitIdList","diaType"],
  data() {
    return {
      checkedRoleList: [],
      isRole:false,
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      selectList: [],
      roleCheckList: [],
      dataList:[]
    }
  },
  computed: {
    ...mapState({
      personnelData: state =>state.personnelData
    }),
    
    
  },
  created(){
    
    getRoleList().then((res)=>{
      if(res.code==0){
        this.dataList = res.data
      }
      
    })
  },
  watch: {
    // visible(val) {
    //   this.visibleDialog = this.visible
    //   if (val) {
    //     this.getRoleList();
    //     this.searchVal = "";
    //     this.checkedRoleList = this.data.map(({ name, targetId }) => ({
    //       roleName: name,
    //       roleId: targetId
    //     }));
    //   }
    // },
    visibleDialog(val) {
      this.$emit('update:visible', val)
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    
    roleCheckList(newVal){
      this.selectList = []
      newVal.forEach(item =>{
        this.dataList.forEach(o =>{
          if(o.id==item){
            this.selectList.push(o)
          }
        })
        
        
      })
    },
    // transmitIdList(newVal){
    //   let that = this
    //   that.roleCheckList=newVal
      
    // },
    
    isRole(newVal){
      let list = []
      
      this.transmitIdList.forEach(item =>{
        list.push(item.id)
      })
      this.roleCheckList = list
    },
    // type(newVal){
      
    // }
  },
  
  
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    
    delselectItem(item,index){
      this.selectList.splice(index,1)
      this.roleCheckList.splice(index,1)
    },
    clear(){
      this.selectList=[]
    },
    saveDialog(){
      this.$emit('selectList',JSON.parse(JSON.stringify(this.selectList)))
      this.isRole = false
    }
  }
}
</script>

<style scoped>
@import "../../css/dialog.css";
.box{
  display: flex;
  
}
.left_box{
  width: 50%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  max-height: 400px;
  overflow: auto;
}
.search_personnel{
  margin-bottom: 20px;
}
/deep/ .el-tree-node__content{
  margin-bottom: 5px;
}
.right_box{
  width: 50%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  max-height: 400px;
  overflow: auto;
}
.ri_top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 40px;
  font-size: 14px;
}
.cen_list{
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.close{
  cursor: pointer;
  font-size: 16px;
  color: rgb(45, 119, 230);
}
.checkbox_box{
  margin: 10px 0;
}
</style>